<!-- eslint-disable ts/no-use-before-define -->
<script setup lang="ts">
import type { CalendarOptions } from '@fullcalendar/core/index.js'
import { TeacherScheduleApi } from '@/apis'
import zhCnLocale from '@fullcalendar/core/locales/zh-cn'
import dayGridPlugin from '@fullcalendar/daygrid'
import interactionPlugin from '@fullcalendar/interaction'
import listPlugin from '@fullcalendar/list'
import timeGridPlugin from '@fullcalendar/timegrid'
import FullCalendar from '@fullcalendar/vue3'
import dayjs from 'dayjs'

const loading = ref(false)
const scheduleLessonList = ref<TeacherScheduleApi.ScheduleLesson[]>([])
const scheduleLessonQuery = reactive<TeacherScheduleApi.ScheduleLessonQuery>({
  lessonDateFrom: undefined,
  lessonDateTo: undefined,
})

const fullCalendar = ref()
const calendarOptions = reactive<CalendarOptions>({
  loading: () => loading.value,
  plugins: [dayGridPlugin, interactionPlugin, timeGridPlugin, listPlugin],
  initialView: 'timeGridWeek', // 默认视图（月：dayGridMonth，周：timeGridWeek，日：timeGridDay）
  firstDay: 1,
  locale: zhCnLocale,
  weekends: true,
  headerToolbar: {
    right: 'timeGridDay,timeGridWeek,dayGridMonth',
    center: 'title',
    left: 'prev,next today',
  },
  slotMinTime: '09:00:00',
  slotMaxTime: '20:00:00',
  slotLabelFormat: {
    hour: '2-digit',
    minute: '2-digit',
    hour12: false, // 设置时间为24小时
  },
  selectable: true,
  height: 680,
  allDaySlot: false,
  datesSet: arg => onDatesSet(arg),
  events: [
    { title: '会议', start: new Date() },
  ],
})
const onDatesSet = async (arg) => {
  const from = dayjs(arg.start).format('YYYY-MM-DD')
  const to = dayjs(arg.end).format('YYYY-MM-DD')
  if (scheduleLessonQuery.lessonDateFrom === from && scheduleLessonQuery.lessonDateTo === to) {
    return
  }
  scheduleLessonQuery.lessonDateFrom = dayjs(arg.start).format('YYYY-MM-DD')
  scheduleLessonQuery.lessonDateTo = dayjs(arg.end).format('YYYY-MM-DD')
  try {
    loading.value = true
    scheduleLessonList.value = await TeacherScheduleApi.getScheduleLessonList(scheduleLessonQuery)
    calendarOptions.events = scheduleLessonList.value.map((item) => {
      return {
        id: item.id,
        title: item.title,
        start: dayjs(`${item.lessonDate} ${item.startTime}`).toDate(),
        end: dayjs(`${item.lessonDate} ${item.endTime}`).toDate(),
        extendedProps: {
          lesson: item,
        },
      }
    })
  } finally {
    loading.value = false
  }
}
</script>

<template>
  <FullCalendar ref="fullCalendar" :options="calendarOptions">
    <template #eventContent="arg">
      <div class="">
        <div>
          {{ arg.event.extendedProps.lesson?.classInfo?.name }}
        </div>
        <div class="font-500">
          {{ arg.event.title }} {{ arg.event.extendedProps.lesson?.startTime }}-{{ arg.event.extendedProps.lesson?.endTime }}
        </div>
        <div class="">
          {{ arg.event.extendedProps.lesson?.campusName }} {{ arg.event.extendedProps.lesson?.classroomName }}
        </div>
      </div>
    </template>
  </FullCalendar>
</template>

<style>
body {
  --fc-border-color: #eee;
  --fc-button-bg-color: rgb(var(--primary-6));
  --fc-button-text-color: white;
  --fc-button-hover-bg-color: rgb(var(--primary-5));
  --fc-button-active-bg-color:  rgb(var(--primary-7));
  --fc-button-active-border-color:  rgb(var(--primary-7));
  /* --fc-event-bg-color: #2196f3; */
  /* --fc-event-border-color: #1976d2; */
  /* --fc-event-text-color: white; */
}
</style>

<style scoped>
:deep(.arco-card-body) {
  color: var(--color-text-1) !important;
}

:deep(.fc-timegrid-slot-minor) {
  border-top-style: none;
}
:deep(.fc-timegrid-slot) {
  /* border-top: none; */
  height: 2em;
}

:deep(.fc-col-header-cell) {
  height: 44px;
  vertical-align: middle;
}
:deep(.fc-header-toolbar) {
  /* background-color: #4caf50; */
  color: white;
  padding: 10px;
  border-radius: 5px;
  color: var(--color-text-1);
}
:deep(.fc-button) {
  /* background-color: #2196f3; */
  border: none;
  color: white;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
}
:deep(.fc-button:hover) {
  /* background-color: #1976d2; */
}
</style>
